<template>
	<view class="newworkOrder_container">
		<view class="" style="height: 160rpx;">
			<view class="mail_List fixed z_ninetynine">
				<view class="mail" style="font-weight: 700;">
					<view class="order">新建工单</view>
				</view>
			</view>
			<view class="icon fixed z_ninetynine">
				<u-icon name="arrow-left" color="#fefefe" size="40" @click="navigateBack"></u-icon>
			</view>
		</view>
		<!-- 巡更新建工单 -->
		<view class="card">
			<uni-card class="second_card" style="margin: 0;">
				<u-form :model="form" ref="uForm">
					<u-form-item label="报事人:">
						<u-input v-model="form.title" placeholder-style="color: #cccccc; text-align: right;"
							placeholder="请输入报事人姓名" />
					</u-form-item>
					<!-- 					<u-form-item label="事件描述:" label-position="top">
						<u-input v-model="form.describe" type="textarea"
							placeholder-style="color: #cccccc; text-align: left;" placeholder="请选择报事报修异常" />
					</u-form-item> -->
					<!-- {{}} -->
					<u-form-item label="事件描述:" label-position="top">
						<u-input v-model="form.describe" type="textarea"
							placeholder-style="color: #cccccc; text-align: left;" placeholder="请输入事件描述" />
						<u-upload :action="$http.host()+'uploadAvatar'" :custom-btn="true" @on-change='change_status'>
							<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
								<u-icon name="plus" size="60" :color="$u.color['lightColor']"></u-icon>
								<view class="add_Photo">点击添加图片</view>
							</view>
						</u-upload>
						<!-- 						<u-upload :action="action" :custom-btn="true">
							<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
								<u-icon name="plus" size="60" :color="$u.color['lightColor']"></u-icon>
								<view class="add_Photo">点击添加图片</view>
							</view>
						</u-upload> -->
					</u-form-item>
				</u-form>
			</uni-card>
		</view>
		<view class="order_Allocation">
			<view class="data_Statistics" style="padding: 28rpx 24rpx 0 ;">{{ nowTime3 }}
				<text style="font-weight: 700; font-size: 30rpx; color: #c4c4c4;">丨</text><text
					style="font-weight: 700; font-size: 30rpx;">工单分配</text>
			</view>
			<view class="card">
				<uni-card class="second_card" style="margin: 0;">
					<u-form :model="form" ref="uForm">
						<u-form-item label="选择区域:">
							<u-input v-model="form.executor" :type="newList3==''? 'select' : 'text'"
								:select-open="show3" placeholder-style="color: #cccccc; text-align: right;"
								:placeholder="newList3==''? '请选择区域': newList3" @click="show3 = true" />
						</u-form-item>
						<u-form-item label="选择小区:">
							<u-input v-model="form.address" :type="newList2==''? 'select' : 'text'" :select-open="show2"
								placeholder-style="color: #cccccc; text-align: right;"
								:placeholder="newList2==''? '请输入选择小区': newList2" @click="show2 = true" />
						</u-form-item>
						<u-form-item label="选择楼宇:">
							<u-input v-model="form.building" :type="newList4==''? 'select' : 'text'"
								:select-open="show4" placeholder-style="color: #cccccc; text-align: right;"
								:placeholder="newList4==''? '请输入选择楼宇': newList4" @click="show4 = true" />
						</u-form-item>
						<u-form-item label="选择单元:">
							<u-input v-model="form.unit" :type="newList5==''? 'select' : 'text'" :select-open="show5"
								placeholder-style="color: #cccccc; text-align: right;"
								:placeholder="newList5==''? '请输入选择楼宇': newList5" @click="show5 = true" />
						</u-form-item>
						<u-form-item label="选择房号:">
							<u-input v-model="form.number" :type="newList6==''? 'select' : 'text'" :select-open="show6"
								placeholder-style="color: #cccccc; text-align: right;"
								:placeholder="newList6==''? '请输入选择楼宇': newList6" @click="show6 = true" />
						</u-form-item>
					</u-form>
					<u-select v-model="show2" mode="single-column" :list="list2" @confirm="confirm2"></u-select>
					<u-select v-model="show3" mode="single-column" :list="list3" @confirm="confirm3"></u-select>
					<u-select v-model="show4" mode="single-column" :list="list4" @confirm="confirm4"></u-select>
					<!-- <u-picker mode="time" v-model="show5" @confirm="confirm5"></u-picker> -->
					<u-select v-model="show5" mode="single-column" :list="list5" @confirm="confirm5"></u-select>
					<u-select v-model="show6" mode="single-column" :list="list6" @confirm="confirm6"></u-select>
				</uni-card>
			</view>

		</view>
		<view class="button">
			<u-button type="primary" style="flex: 1;">取消</u-button>
			<u-button type="success" style="flex: 1;" @click="determine">确定</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// form表单
				form: {
					// 关联异常
					type: '',
					type_two: '',
					// 选择区域
					executor: '',
					executor_two: '',
					// 选择小区
					address: '',
					address_two: '',
					// 选择楼宇
					building: '',
					building_two: '',
					// 选择单元
					unit: '',
					unit_two: '',
					// 选择房号
					number: '',
					number_two: '',
					title: '',
					describe: '',
					chargePerson: '',
					Maintenance: '',
					endTime: '',
					// 手机号码
					staffPhone: ''
				},
				// 演示地址，请勿直接使用
				// action: $https.host(),
				// action: +'uploadAvatar',
				// fileList: [
				// 	{
				// 		url: '',
				// 	}
				// ],
				show: false,
				show2: false,
				show3: false,
				show4: false,
				show5: false,
				show6: false,
				// 关联异常
				list: [{
						value: '0',
						label: '装修巡查'
					},
					{
						value: '1',
						label: '项目巡查'
					}
				],
				// 选择小区
				list2: [{
						value: '1',
						label: ''
					},
					{
						value: '2',
						label: ''
					}
				],
				// 选择区域
				list3: [{
						value: '1',
						label: ''
					},
					{
						value: '2',
						label: ''
					}
				],
				// 选择楼宇
				list4: [{
						value: '1',
						label: ''
					},
					{
						value: '2',
						label: ''
					}
				],
				// 选择单元
				list5: [{
						value: '1',
						label: ''
					},
					{
						value: '2',
						label: ''
					}
				],
				// 选择房号
				list6: [{
						value: '1',
						label: ''
					},
					{
						value: '2',
						label: ''
					}
				],
				// 选择小区
				newList2: '',
				// 选择区域
				newList3: '',
				// 选择楼宇
				newList4: '',
				// 选择单元
				newList5: '',
				// 选择房号
				newList6: '',
				// 时间实时展示
				nowTime: "",
				nowTime2: "",
				nowTime3: "",
				// 待执行Id
				orderId: '',
				// 车辆详情
				particulars: '',
				// 审核通过
				staff: '',
				// 图片保存
				img_List:[],
				// str:''
			}
		},
		onLoad() {
			this.loginId = uni.getStorageSync("setModel")
			// 实时显示时间;
			// this.nowTimes();
			// 选择区域
			this.Approved()
			// 选择楼宇
			this.selectBuilding()
			// 选择单元
			this.selectUnit()
			// 选择房号
			this.roomNumber()
		},
		methods: {
			change_status(res) {
				// console.log(res)
				// console.log(res.data.data,'----------')
				// let img = JSON.parse(res.data)
				// console.log(img.data,'----------')
				// console.log(JSON.parse(res.data),'----------')
				// let img = JSON.parse(res.data.data)
				if (res.statusCode == 200) {
					let img = JSON.parse(res.data)
					let img_two=img.data
					this.img_List.push(img_two)
					console.log(this.img_List)
					// this.str=this.img_List.join(',')
					// console.log(JSON.parse(this.img_List))
				}
			},
			// 选择区域
			Approved() {
				this.$http.get('informationInquiry/selectAreaList', {}).then(res => {
					// console.log(res, '选择区域')
					// this.particulars=res.data
					let lists = res.data
					this.list3 = this.changeKey(lists, ['value', 'label', 'label', 'label']);
				})
			},
			// 选择小区
			cellAddress() {
				this.$http.get('informationInquiry/selectCommunityByArea', {
					areaId: this.form.executor_two,
					communityType: '1',
					deptId: this.loginId.deptId
				}).then(res => {
					// console.log(res, '选择小区')
					// this.particulars=res.data
					let lists = res.data
					this.list2 = this.changeKey(lists, ['value', 'label', 'label', 'label', 'label', 'label',
						'label', 'label'
					]);
				})
			},
			// 选择楼宇
			selectBuilding() {
				this.$http.get('WorkOrder/selectBuddingList', {
					communityType: '2',
					deptId: this.loginId.deptId
				}).then(res => {
					// console.log(res, '选择楼宇')
					// this.particulars=res.data
					let lists = res.data
					this.list4 = this.changeKey(lists, ['value', 'label', 'label', 'label', 'label', 'label',
						'label', 'label'
					]);
				})
			},
			// 选择单元
			selectUnit() {
				this.$http.get('WorkOrder/selectBuddingList', {
					communityType: '3',
					deptId: this.loginId.deptId
				}).then(res => {
					// console.log(res, '选择单元')
					// this.particulars=res.data
					let lists = res.data
					this.list5 = this.changeKey(lists, ['value', 'label', 'label', 'label', 'label', 'label',
						'label', 'label'
					]);
				})
			},
			// 选择房号
			roomNumber() {
				this.$http.get('WorkOrder/selectBuddingList', {
					communityType: '4',
					deptId: this.loginId.deptId
				}).then(res => {
					console.log(res, '选择房号')
					// this.particulars=res.data
					let lists = res.data
					this.list6 = this.changeKey(lists, ['value', 'label', 'label', 'label', 'label', 'label',
						'label', 'label'
					]);
				})
			},
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			// 选择区域
			confirm3(e) {
				console.log(e);
				this.form.executor = e[0].label
				this.form.executor_two = e[0].value
				// 选择小区
				this.cellAddress();
			},
			// 选择小区
			confirm2(e) {
				console.log(e)
				this.form.address = e[0].label
				this.form.address_two = e[0].value
			},
			// 选择楼宇
			confirm4(e) {
				console.log(e);
				this.form.building = e[0].label
				this.form.building_two = e[0].value
			},
			// 选择单元
			confirm5(e) {
				console.log(e);
				this.form.unit = e[0].label
				this.form.unit_two = e[0].value
			},
			// 选择房号
			confirm6(e) {
				console.log(e);
				this.form.number = e[0].label
				this.form.number_two = e[0].value
				// this.form.endTime = `${e.year}-${e.month}-${e.day}`
				// console.log(this.form.endTime)
			},
			// 点击确定按钮触发
			determine() {
				// this.show2 = true
				// console.log(171)
				this.$http.post('WorkOrder/insertReportRepair', {
					loginId: this.loginId.userId,
					repairName: this.form.title,
					description: this.form.describe,
					images:this.img_List,
					areaId: this.form.executor_two,
					communityId: this.form.address_two,
					// buildingId: this.form.building_two,
					// unitId: this.form.unit_two,
					// roomId: this.form.number_two,
				}).then(res => {
					console.log(res, '新增报事报修工单')
					// this.particulars=res.data
				})
				// setTimeout(function() {
				uni.navigateBack()
				// }, 1000);
			},
			changeKey(lists, key) {
				let newArr = [];
				lists.forEach((item) => {
					let newObj = {};
					for (var i = 0; i < key.length; i++) {
						newObj[key[i]] = item[Object.keys(item)[i]]
					}
					newArr.push(newObj);
				})
				return newArr;
			},
			navigateBack() {
				uni.navigateBack()
			},
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
		}
	}
</script>

<style lang="scss" scoped>
	.newworkOrder_container {

		.mail_List {
			overflow: hidden;
			width: 100%;
			background-color: #f2f2f2;

			.mail {
				padding: 10rpx 0;
				// margin-top: 96rpx;
				color: #999999;
				font-size: 40rpx;
				background-color: #e5e5e5;
			}

			.order {
				text-align: center;
			}
		}

		/deep/.card {

			u-form-item {
				.u-input {
					input {
						text-align: right !important;
					}

				}
			}

			.u-form-item--left {
				flex: unset !important;
				width: unset !important;
			}
		}

		.order_Allocation {
			/deep/.card {
				u-form-item {
					.u-input {
						input {
							text-align: right !important;
						}

					}
				}
			}
		}

		.icon {
			position: absolute;
			top: 18rpx;
			// top: 114rpx;
			left: 20rpx;
		}

		/deep/.second_card {
			/deep/.u-cell__value {
				margin-right: -18rpx;
			}

			.u-cell {
				padding: 18rpx 32rpx;
			}

			.uni-card__content {
				padding: 0 24rpx !important;
			}
		}

		/deep/.uni-border {
			border-radius: unset !important;
			margin: 24rpx 0 !important;
		}

		.uni-border[data-v-19622063]:after {
			border: unset;
		}

		/deep/.uni-border.data-v-19622063:after {
			border: unset;
		}

		.slot-btn {
			display: flex;
			flex-direction: column;
			width: 200rpx;
			height: 200rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #e5e5e5;

			.add_Photo {
				margin-top: 10rpx;
				color: #cccccc;
			}
		}

		.slot-btn__hover {
			background-color: rgb(235, 236, 238);
		}

		/deep/.button {
			display: flex;
			// position: fixed;
			// left: 0;
			// right: 0;
			// bottom: 0;
			margin-top: 200rpx;
			border-radius: 14rpx;
			overflow: hidden;
			// z-index: 9;

			.u-btn {
				border-radius: unset;
			}
		}
	}
</style>
